//第四个图表，产品的价格折线图
var chart4 = echarts.init(document.querySelector('.line1 .chart'));
var option4 = {
  title:{
      text:type+"苗成活率",
      textStyle:{
        color:"#4c9bfd"
      },
      left:"center"
  },
  // 设置网格样式
  grid: { 
    top: '20%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    show: true,// 显示边框
    borderColor: '#012f4a',// 边框颜色
    containLabel: true // 包含刻度文字在内
  },
  tooltip: {
    trigger: "axis"
  },
  // 图例组件
legend: {
    textStyle: {
      color: '#4c9bfd' // 图例文字颜色
    },
    right: '10%' // 距离右边10%
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisTick: {
       show: false // 去除刻度线
     },
     axisLabel: {
       color: '#4c9bfd' // 文本颜色
     },
     axisLine: {
       show: false // 去除轴线
     },
     boundaryGap: false  // 去除轴内间距
  },
  yAxis: {
    type: 'value',
    axisTick: {
      show: false  // 去除刻度
    },
    axisLabel: {
      color: '#4c9bfd' // 文字颜色
    },
    splitLine: {
      lineStyle: {
        color: '#012f4a' // 分割线颜色
      }
    }
  },
series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    smooth:true,
}]
};
chart4.setOption(option4)
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function() {
chart4.resize();
});
// 第五个图表产量柱状图
// 1实例化对象
var chart5 = echarts.init(document.querySelector(".bar1 .chart"));
// 2. 指定配置项和数据
var option5 = {
title:{
   text:type+"养殖面积",
   textStyle:{
    color:"#4c9bfd"
  },
  left:"center",
  top:"5px"
},
color: ["#2f89cf"],
tooltip: {
 trigger: "axis",
 axisPointer: {
   // 坐标轴指示器，坐标轴触发有效
   type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 }
},
// 修改图表的大小
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
 containLabel: true
},
xAxis: [
 {
   type: "value",
   axisTick: {
     alignWithLabel: true
   },
   // 修改刻度标签 相关样式
   axisLabel: {
     color: "#4c9bfd ",
     fontSize: "12"
   },
   // 不显示x坐标轴的样式
   axisLine: {
     show: false
   }
 }
],
yAxis: [
 {
   type: "category",
   data: [
    "游戏行业",
    "医疗行业",
    "电商行业",
    "社交行业",
    "金融行业"
  ],
   // 修改刻度标签 相关样式
   axisLabel: {
     color: "#4c9bfd ",
     fontSize: 12
   },
   // y轴的线条改为了 2像素
   axisLine: {
     lineStyle: {
       color: "rgba(255,255,255,.1)",
       width: 2
     }
   },
   // y轴分割线的颜色
   splitLine: {
     lineStyle: {
       color: "rgba(255,255,255,.1)"
     }
   }
 }
],
series: [
 {
   name: "直接访问",
   type: "bar",
   barWidth: "35%",
   data: [200, 300, 300, 900, 1500, 1200, 600],
   itemStyle: {
     // 修改柱子圆角
     barBorderRadius: 5
   }
 }
]
};
// 3. 把配置项给实例对象
chart5.setOption(option5);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function() {
chart5.resize();
});

//第六个图形
var chart6 = echarts.init(document.querySelector(".pie1 .chart"));
  var option6 = {
    title:{
      text:type+"产量地区分布",
      textStyle:{
       color:"#4c9bfd"
     },
     left:"center",
     top:"5px"
   },
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff"
    ],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
      left:'left',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    series: [
      {
        name:"地区分布",
        type: "pie",
        radius: ["10%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        // 图形的文字标签
        label: {
          fontSize: 10
        },
        // 链接图形和文字的线条
        labelLine: {
          // length 链接图形的线条
          length: 6,
          // length2 链接文字的线条
          length2: 8
        },
        data: [
          { value: 20, name: "云南" },
          { value: 26, name: "北京" },
          { value: 24, name: "山东" },
          { value: 25, name: "河北" },
          { value: 20, name: "江苏" },
          { value: 25, name: "浙江" },
          { value: 30, name: "四川" },
          { value: 42, name: "湖北" }
        ]
      }
    ]
  };
  chart6.setOption(option6);
  //动态数据
  /*setInterval(function (){

    var data1 = option1.series[0].data;
    var data2 = option2.series[0].data;
    data1.shift();
    data1.push(Math.round(Math.random() * 1000+100));
    data2.shift();
    data2.push(Math.round(Math.random() * 1000+100));

    option1.xAxis.data.shift();
    option1.xAxis.data.push('sun');
    option2.xAxis[0].data.shift();
    option2.xAxis[0].data.push('sun');

    chart1.setOption(option1);
    chart2.setOption(option2);
}, 2100);*/
//动态请求图表数据
//获取种类
var url;
var reflect = {
  fish:"黑鲷鱼",
  shrimp:"对虾",
  shell:"牡蛎"
}
getType();
getTypeData();//获取图标数据
getMapData();//获取地图数据
$(".selectBox").change(function(e){
url = e.target.value;
type=reflect[url];
console.log(type)
getTypeData();
getMapData();
})
function getType(){
  url = window.location.href.split("?")[1]
  if(!url){
    url="fish";
    type=reflect[url];
    return;
  }
  url=url.split("=")[1];
  url=url?url:"fish"
  type=reflect[url];
}
function getTypeData(){

$.ajax({
  type:'get',
  url:'/'+url,
  success:res=>{
     dynamic1={
      x:res[0].xAxis.slice(5),
      y:res[0].yAxis.slice(5)
    }
    dynamic2={
      x:res[1].xAxis.slice(5),
      y:res[1].yAxis.slice(5)
    }
    dynamic4={
      x:res[2].xAxis.slice(5),
      y:res[2].yAxis.slice(5)
    }
    dynamic5={
      x:res[3].xAxis.slice(5),
      y:res[3].yAxis.slice(5)
    }
    option1.xAxis.data=res[0].xAxis.slice(0,5);
    option1.series[0].data = res[0].yAxis.slice(0,5);
    option2.xAxis.data=res[1].xAxis.slice(0,5);
    option2.series[0].data = res[1].yAxis.slice(0,5);
    option4.xAxis.data=res[2].xAxis.slice(0,5);
    option4.series[0].data = res[2].yAxis.slice(0,5);
    option5.xAxis.data=res[3].xAxis.slice(0,5);
    option5.series[0].data = res[3].yAxis.slice(0,5);
    //两个饼形图
    option3.legend.data = res[4].xAxis;
    option3.series[0].data = res[4].yAxis;
    option6.legend.data = res[5].xAxis;
    option6.series[0].data = res[5].yAxis;
    option1.title.text= type+"价格走势"
    option2.title.text= type+"产量"
    option3.title.text= type+"销往地"
    option4.title.text= type+"幼苗成活率"
    option5.title.text= type+"养殖面积"
    option6.title.text= type+"产量地区分布"
    chart1.setOption(option1);
    chart2.setOption(option2);
    chart4.setOption(option4);
    chart5.setOption(option5);
    chart3.setOption(option3);
    chart6.setOption(option6);


  },
  error:(xhr, status, error)=>{
    console.log('出错了',error)
  }
})
}
//图表动画
setInterval(function(){
  dynamic1.x.push(option1.xAxis.data.shift())
  dynamic1.y.push( option1.series[0].data.shift())
  option1.xAxis.data.push(dynamic1.x.shift())
  option1.series[0].data.push( dynamic1.y.shift())
 chart1.setOption(option1);

 dynamic2.x.push(option2.xAxis.data.shift())
 dynamic2.y.push( option2.series[0].data.shift())
 option2.xAxis.data.push(dynamic2.x.shift())
 option2.series[0].data.push( dynamic2.y.shift())
chart2.setOption(option2);

dynamic4.x.push(option4.xAxis.data.shift())
dynamic4.y.push( option4.series[0].data.shift())
option4.xAxis.data.push(dynamic4.x.shift())
option4.series[0].data.push( dynamic4.y.shift())
chart4.setOption(option4);

dynamic5.x.push(option5.xAxis.data.shift())
dynamic5.y.push( option5.series[0].data.shift())
option5.xAxis.data.push(dynamic5.x.shift())
option5.series[0].data.push( dynamic5.y.shift())
chart5.setOption(option5);

},2100)
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function() {
    chart6.resize();
  });